<template>
    <div class="container">
        <div class="item-con md:flex mx-auto ">
            <div class="item-img">
                <div class="block">
                    <el-image :style="{ width: '100%', height: '100%' }" :src="item.url"
                        :preview-src-list="item.srcList" :fit="fits[2]"></el-image>
                </div>
            </div>
            <div class="item-info">
                <div class="block">
                    <h1 class="text-3xl font-bold text-left p-4 bg-white rounded-lg">{{ item.name }}</h1>
                    <div class="num md:flex  m-4 bg-gray-300 rounded-sm ">
                        <p class="text-base" style="padding-right:0;">编号：#</p>
                        <p class="text-base text-red-700" style="padding:0 0.3rem ;" >{{ item.numBerIng }}</p>
                        <p style="padding-left:0">/{{ item.num }}</p>
                        <a href="#" class="other text-blue-700 text-base" @click="toGroup(item.group)">选择其他编号</a>
                    </div>
                    <div class="info md:flex ">
                        <div class="author">
                            <p class="text-gray-400">{{ item.author }}</p>
                            <p>{{ item.author }}</p>
                        </div>
                        <div class="nowNum">
                            <p class="text-gray-400">现存数量</p>
                            <p>{{ item.num }}</p>
                        </div>
                    </div>
                    <div class="price">
                        <h1 class="text-3xl font-blod text-blue-700 text-left px-4 py-4">￥{{ item.price }}</h1>
                    </div>
                    <div class="buy bg-white rounded-lg my-4 hover:bg-blue-700 hover:text-white"
                        :class="{ none: item.itemState == false ? true : false }">
                        <button class="text-xl  px-4 py-2" @click="buy">
                            {{ item.itemState == false ? "未寄售" : "立即购买" }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="introduce">
            <div class="title">
                <h1 class="text-xl font-bold text-left">作品详情</h1>
                <div class="content">
                    <p>{{ item.introduce }}</p>
                </div>
            </div>
            <div class="content">
            </div>
            <div class="title">
                <h1 class="text-xl font-bold text-left">关于数字藏品</h1>
                <div class="content">
                    <p>数字藏品可以通俗理解为区块链凭证。通常是指开发者在以太坊平台上根据ERC721标准/协议所发行，特性为不可分割、不可替代、独一无二。数字藏品常见于文化艺术品领域、知识产权的链上发行、流转、确权等作用，能有效保护链上知识产权，防止篡改、造假等，是区块链技术的一类场景应用。
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
            item: {
                name: "ZERTO",
                url: 'https://imgbed.link/file/15729',
                numBerIng: 1,
                num: 888,
                author: "ZEROT",
                nowNum: 888,
                price: 888,
                srcList: [
                    'https://imgbed.link/file/15729',
                ],
                introduce: "",
                itemState: ""
            },
            no: false
        }
    },
    methods: {
        getItem(value) {
            console.log(value)
            this.$axios.postInfo("/item", value).then(res => {
                console.log(res)
                let getItem = res.item
                let itemGroup = res.itemGroup[0]
                this.item = Object.assign(this.item, getItem)
                this.item.name = itemGroup.name
                this.item.url = itemGroup.url
                this.item.num = itemGroup.num
                this.item.author = itemGroup.author
                this.item.introduce = itemGroup.introduce
                this.item.srcList[0] = itemGroup.url
                this.item.itemState = getItem.itemState == 0 ? false : true
                console.log(this.item)
            })
        },
        toGroup(value) {
            console.log(value)
            this.$router.push({ path: 'group', query: { itemsId: value, itemstate: 1 } })

        },
        buy() {
            console.log("购买")
        }
    },
    created() {
        let query = this.$route.query;
        this.getItem(query)


    }
}

</script>
<style  lang="less" scoped>
.container {
    position: relative;
    width: 100%;
    margin-top: 100px;
    padding: 1rem;
    @apply bg-blue-50;

    .item-con {
        position: relative;
        width: 90%;
        height: auto;
        min-height: 500px;
        max-height: 70vh;

        .item-img {
            position: relative;
            width: 50%;
            padding: 1rem;

            .block {
                position: relative;
                z-index: 3;
                height: 100%;
                /deep/ .el-iamge{
                    height: 100%;
                }
            }
        }

        .item-img::before {
            content: "";
            position: absolute;
            top: 1.5%;
            left: 0%;
            width: 10%;
            height: 4%;
            @apply bg-blue-300;

        }

        .item-img::after {
            content: "";
            position: absolute;
            top: 1.5%;
            right: 0%;
            width: 10%;
            height: 4%;
            @apply bg-blue-300;
            z-index: 1;
        }

        .item-info {
            position: relative;
            width: 50%;
            padding: 1rem;
            // background: #fff;

            .num {

                p {
                    padding-right: .3rem;
                    padding-left: 1rem;
                }

            }

            .info {
                border-bottom: 1px solid rgba(128, 128, 128, 0.2);
                padding: 1rem;
                align-items: flex-start;
                // justify-content: flex-start;
                flex-wrap: wrap;

                div {
                    position: relative;
                    // width: 25%;
                    padding: .2rem 1rem;
                    // border-right: 1px solid rgba(128, 128, 128, 0.2);
                }

                div::after {
                    content: "";
                    position: absolute;
                    right: 0%;
                    top: 40%;
                    width: 1px;
                    height: 60%;
                    @apply bg-gray-300;
                }
            }

            .block {
                .buy button {
                    width: 100%;
                    height: 100%;
                }

                .none {
                    pointer-events: none;
                    background: #fbfbfb;
                }
            }
        }
    }

    .introduce {
        position: relative;
        width: 85%;
        display: flex;
        flex-direction: column;
        align-items: center;

        h1 {
            text-indent: 0%;
        }

        .title {
            width: 90%;
            padding: 1rem 0;
        }

        p {
            padding-left: 0%;
            text-align: left;
            @apply text-gray-500;
            @apply text-sm;
        }


    }
}
</style>